// 商品评价
import React, { useState, useRef, useEffect } from 'react'
import {getListEva ,auditselect} from '../../../api/finance'
import {
  Table,
  Space,
  Button,
  Form,
  Input,
  Select,
  Modal,
  message,
  Switch,
  Collapse
} from 'antd'
import type { ColumnsType } from 'antd/es/table'
import type { TableRowSelection } from 'antd/es/table/interface'
import { ExclamationCircleFilled } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
// 表格
interface DataType {
  key: React.Key
  name: string
  userName:string
  num:number,
  ip: string,
  xianshi:true
  time:string,
  type: string
  id?:number
  appraiseId?:number
}

interface searchType {
  inputVlaue: string
  Type: string
  Brand: string
}

export default function GoodEvaluation() {
  const [data,setData] = useState<any>()
  const [pageNum, setPageNum] = useState()
  //请求数据
  const getList = () => {
    getListEva({
      "limit": 4,
      "page": 1
    }).then((res) => {
      console.log('res=====>', res)
      setData(res.data.data)
      addKey(res.data.data)
      setPageNum(res.data.totalByStatus)
    })
      .catch((err) => {
        console.log('err=====>', err)
      })
  }
  useEffect(() => {
    getList()
  },[])
  const { Panel } = Collapse;
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys)
  }

  const addForm = useRef<any>()
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'key',
    },
    {
      title: '商品名称',
      dataIndex: 'name',
    },
    {
			title: '用户昵称',
			dataIndex: 'userName',
		},
    {
			title: '评分',
			dataIndex: 'num',
		},
    
    {
      title: '类型',
      dataIndex: 'type',
    },
    {
      title: 'IP地址',
      dataIndex: 'ip',
    },
    {
      title: '评论时间',
      dataIndex: 'time',
    },
    {
      title: '是否显示',
      dataIndex: 'xianshi',
      render: (_, record) => (
        <Switch defaultChecked onChange={onChange2} />
      ),
    },
    {
      title: '操作',
      dataIndex: 'address',
      render: (_, record) => (
        <Space size="middle">
          <Button className="add" onClick={() => Look(record)}>查看</Button>
          <Button id="del" onClick={() => showConfirm(record)}>删除</Button>
        </Space>
      ),
    },
  ]


  const onChange2 = (checked: boolean) => {
    console.log(`switch ====> ${checked}`); 
    
  }
  const [ChangeType, setChangeType] = useState<string>()
  const [ChangeBrand, setChangeBrand] = useState<string>()
  //分类下拉框
  const handleChangeType = (value: string) => {
    // console.log(`handleChangeType ${value}`);
    setChangeType(value)
    // console.log('ChangeType',ChangeType);
  }

  //品牌下拉框
  const handleChangeBrand = (e:any) => {
    console.log('e========>',e.target.value);
    // console.log(`handleChangeBrand ${e}`);
    setChangeBrand(e.target.value)
  }

  // 操作部分
  // （1）删除
  // 删除弹框
  const { confirm } = Modal
  const showConfirm = (record: any) => {
    confirm({
      title: '提示:',
      icon: <ExclamationCircleFilled />,
      content: '您确定要删除这一行吗？删除后无法恢复！',
      cancelText: '取消',
      okText: '确认',
      onOk() {
        // 点击确定发起请求
        console.log('OK', record)
        message.success('删除成功！')
      },
    })
  }

  const [isModalOpen, setIsModalOpen] = useState<boolean>()
  const [isModalOpen2, setIsModalOpen2] = useState<boolean>()

  const navigator = useNavigate()
  //查看
  const Look = (record: any) => {
    console.log('点击查看', record)
    navigator('/home/goods/GoodEvaluationDetail')
  }
  // （3）重置
  const reset = () => {
    console.log('addForm', addForm)
    addForm.current.resetFields()
    message.success('重置成功！')
  }

  // (4)查询
  const sreach = (values: any) => {
    console.log('查询需要的信息', values.keyword, ChangeType, ChangeBrand)
    message.success('查询成功！')
    if (!values.keyword || !ChangeType || !ChangeBrand) {
      message.success('请输入需查询的信息')
    } else {
      auditselect({
        limit: 4,
        page: 1,
        goodsName: values.keyword,
        goodsCategoryId: ChangeType,
        brandName: ChangeBrand
      }).then((res) => {
        console.log('res查询', res);
        setData(res.data.data)
        // getList()
      }).catch((err) => {

      });
    }
  }
  const batches = () => {
    console.log('selectedRowKeys', selectedRowKeys)
    confirm({
      title: '提示:',
      icon: <ExclamationCircleFilled />,
      content: '您确定要删除这些数据吗？删除后无法恢复！',
      cancelText: '取消',
      okText: '确认',
      onOk() {
        // 点击确定发起请求
        message.success('删除成功！')
      },
    })
  }

  const [stateDefaultValue, setStateDefaultValue] = useState('请选择')

  const handleOk = () => {
    console.log('确认审核')
    setIsModalOpen(false)
  }

  const handleCancel = () => {
    console.log('取消审核')
    setIsModalOpen(false)
  }

  const onChangeSwitch = (checked: boolean) => {
    console.log(`switch to ${checked}`)
  }
  //下拉框
  const handleChange = (value: string) => {
    console.log(`selected ${value}`)
  }  

  const [SelectedRow, setSelectedRow] = useState()
  const rowSelection = {
    onChange: (key: any, row: DataType[]) => {

      let checkArr: any = [];
      row.map(item => {
        checkArr.push(item.appraiseId)
      })
      setSelectedRow(checkArr)
      console.log("checkArr", checkArr);
    },
  }
  const addKey = (data: DataType[]) => {
    data.map(item => {
      item.id = Math.floor(Math.random() * 10000000000)
      return item
    })
  }
  return (
    <div>
      {/* 头部标题 */}
      <p className="head">商品评价</p>
      <Collapse className='collapse' defaultActiveKey={['1']}>
        <Panel header="筛选查询" key="1">
        <div className="operate-wrap">
        <div>
          <Form
            className="operate-left operate-left-item"
            onFinish={sreach}
            ref={addForm}
          >
            <Form.Item
              label="关键词："
              className="operate-left-item"
              name="keyword"
            >
              <Input placeholder="商品名称/商品货号" className="search" />
            </Form.Item>
            <Form.Item label="评价分类：" className="operate-left-item" name="type">
              <Space wrap>
                <Select
                  defaultValue="请选择"
                  onChange={handleChangeType}
                  style={{ width: 120 }}
                  allowClear
                  options={[
                    { value: '首次评价', label: '首次评价' },
                    { value: '追加评价', label: '追加评价' },
                  ]}
                  className="drop"
                />
              </Space>
            </Form.Item>
            <Form.Item
              label="用户昵称："
              className="operate-left-item"
              name="brand"
            >
              <Input placeholder="用户昵称" className="search" onChange={handleChangeBrand}/>
            </Form.Item>
            <Form.Item>
              <Button className="inquire operate-left-item" htmlType="submit">
                查询
              </Button>
              <Button className="reset operate-left-item" onClick={reset}>
                重置
              </Button>
            </Form.Item>
          </Form>
          <div></div>
        </div>
      </div>
        </Panel>
      </Collapse>
      
      <div className="operationTable">
        {/* 排序 */}
        <Form>
          <Form.Item
            label="排序方式："
            className="operate-left-item"
            name="state"
            initialValue={stateDefaultValue}
          >
            <Space wrap>
              <Select
                onChange={handleChange}
                style={{ width: 120 }}
                allowClear
                options={[
                  { value: '按时间倒序', label: '按时间倒序' },
                  { value: '按时间顺序', label: '按时间顺序' },
                ]}
                className="drop"
              />
            </Space>
          </Form.Item>
        </Form>
        <Button onClick={batches} id="del" className="operate-left-item">
          批量删除
        </Button>
      </div>
      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={data}
        pagination={{ pageSize: 6 }}
      />

      <Modal
        title="商品评价"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确定"
        cancelText="取消"
      >
      </Modal>

      {/* 查看 弹框
      <Modal
        title="商品详情"
        open={isModalOpen2}
        onOk={handleOk2}
        onCancel={handleCancel2}
        okText='确定'
        cancelText='取消'
      >
        <div>我是商品详情</div>
      </Modal> */}
    </div>
  )
}
